<template>
	<div class="header">
		<img src="/img/time_rec.png" max-width="100% height: auto;" alt="Image" />
		<div class="banner_title">
			<span>查询出入记录</span>
		</div>
	</div>
	<div class="content">
		<van-form @submit="handleSubmit">
			<!-- <van-field v-model="form.name" label="姓名" placeholder="请输入姓名" /> -->
			<van-field v-model="form.beginDate" label="开始时间" placeholder="请选择开始时间" required>
				<template #button>
					<van-icon @click="show = true" name="chat-o" />
				</template>
			</van-field>

			<van-field
				v-model="form.endDate"
				label="结束时间"
				placeholder="请选择结束时间"
				required
				@click="show = true"
			/>
			<van-cell title="选择日期区间" :value="date" @click="show = true" />
			<van-calendar
				v-model:show="show"
				type="range"
				@confirm="onConfirm"
				color="#ee0a24"
				allow-same-day
				:min-date="minDate"
				:max-date="maxDate"
			/>

			<van-row>
				<van-col span="8" offset="2">
					<van-button type="primary" round block native-type="submit">查询</van-button>
				</van-col>
				<van-col span="8" offset="2">
					<van-button type="success" round block @click="onExport">导出</van-button>
				</van-col>
			</van-row>
		</van-form>
	</div>
</template>

<script setup name="ExportExcel">
	import { ref } from 'vue'
	import { reactive } from 'vue'
	import { Popup, DatePicker, Button, Form, Field, CellGroup, showToast } from 'vant'
	import service from '@/utils/request'
	import axios from 'axios'
	import fileDownload from 'js-file-download'

	const minDate = new Date(2023, 8, 1)
	const maxDate = new Date()
	const date = ref('')
	const show = ref(false)
	const form = reactive({
		door: [],
		name: '所有人',
		beginDate: '',
		endDate: ''
	})
	const formatDate = (date) => `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
	const onConfirm = (values) => {
		const [start, end] = values
		show.value = false
		date.value = `${formatDate(start)} ~ ${formatDate(end)}`
		form.beginDate = formatDate(start)
		form.endDate = formatDate(end)
	}
	const onExport = () => {
		console.log('*****正在提交*******')
		const url = `http://ooo.dgpms.cn:8008/api/entry/export/${form.beginDate}/${form.endDate}`
		// 发送GET请求获取Excel文件
		const response = axios
			.get(url, { responseType: 'blob' })
			.then((res) => {
				fileDownload(res.data, 'export.xls')
				showToast('下载成功!')
				// 这里也可以不创建a链接，直接window.open(href)也能下载
			})
			.catch(function (error) {
				console.log(error)
				showToast('Error occurred 出错了!')
			})
	}
	const handleSubmit = () => {}
</script>

<style scoped>
	header {
		padding: 12px 30px;
		background-color: #fff;
		.head {
			display: flex;
			align-items: center;
			height: 47px;
			padding-left: 20px;
			border-bottom: 1px solid #dedede;
			img {
				display: inline-block;
				width: 22px;
				margin-right: 7px;
			}
			span {
				margin-top: 30px;
			}
		}
	}

	.content {
		padding: 12px;
	}
</style>
